<template>
  <div>
    <van-form @submit="onSubmit">
      <!-- 基本信息 -->
      <FormTitle title="基本信息"></FormTitle>
      <van-cell-group inset>
        <van-field
          v-model="formData.house"
          required
          name="选择房屋"
          label="选择房屋"
          placeholder="请输入选择房屋"
          @click="showHouseList"
          :rules="[{ required: true, message: '请选择房屋' }]"
        />
        <van-field
          v-model="formData.name"
          required
          name="姓名"
          label="姓名"
          placeholder="请输入内容"
          :rules="[{ required: true, message: '请输入用户名/手机号' }]"
        />
        <van-field
          v-model="formData.IdCard"
          required
          name="身份证号码"
          label="身份证号码"
          placeholder="请输入内容"
          :rules="[{ required: true, message: '请输入用户名/手机号' }]"
        />
        <van-field
          v-model="formData.phone"
          required
          name="联系方式"
          label="联系方式"
          placeholder="请输入内容"
          :rules="[{ required: true, message: '请输入用户名/手机号' }]"
        />
      </van-cell-group>

      <!-- 备注 -->
      <van-cell-group inset class="mt-10">
        <van-field
          v-model="formData.remake"
          label-align="top"
          rows="2"
          autosize
          label="备注"
          type="textarea"
          maxlength="500"
          placeholder="请输入备注"
          show-word-limit
        />
      </van-cell-group>
      <div class="dvc"></div>
      <div class="bottomButton">
        <van-button round block type="primary" native-type="submit">
          确认提交
        </van-button>
      </div>
    </van-form>

    <!-- 显示选择房屋组件 -->
    <van-popup v-model:show="showHouse" round position="bottom">
      <van-picker
        :columns="houseList"
        @confirm="onConfirmshowSqzj"
        @cancel="showHouse = false"
        option-height="56"
      />
    </van-popup>

    <!-- <van-popup v-model:show="showPickerForTime" position="bottom">
      <van-date-picker @confirm="onConfirmForTime" @cancel="showPickerForTime = false" />
    </van-popup> -->
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";

// import { getTenantInfo } from "@/api/tenant/index.js";
import api from "@/api/tenant.js";
import FormTitle from "@/components/formTitle/index.vue";
import { showToast } from "vant";
import { useUserStore } from "@/stores/user.js";
import { useRouter } from "vue-router";
const router = useRouter();
const userStore = useUserStore();
// 显示房屋
const showHouse = ref(false)
const houseList = ref([])
// 表单数据
const infoForm = ref({
  result: "",
  updata1: [],
})

const formData = reactive({
  house: '',
  name: '',
  IdCard: '',
  phone: '',
  remake: '',
  rentId: ''
})
// 房屋信息列表
const showHouseList = () => {
  showHouse.value = true;
}
// 选择房屋确认事件
const onConfirmshowSqzj = (value) => {
  // console.log('value',value.selectedOptions[0].text);
  formData.house = value.selectedOptions[0].text
  formData.rentId = value.selectedOptions[0].value
  showHouse.value = false;
}
// 提交
const onSubmit = async () => {
  // alert('提交')
  let params = {
    rentId: formData.rentId,
    idCard: formData.IdCard,
    name: formData.name,
    address: formData.house,
    sex: '',
    telphone: formData.phone,
    remake: formData.remake,
    in_time: '',
    out_time: ''
  }
  let res = await api.getTenantInfo(params)
  console.log('--res--', res);
  if (res.data.code == 200 && res.data.msg === "操作成功") {
    showToast('添加成功！')
    setTimeout(() => {
      router.push({
        path: '/rental'
      })
    }, 1400);
  }
}

onMounted(async () => {
  let res = await api.Rent(userStore.userInfo.userId)
  console.log('--res--', res)
  houseList.value = res.data.rows.map(item => {
    item = {
      text: item.title,
      value: item.rentId
    }
    return item
  })
})
</script>

<style lang="scss" scoped>
.dvc {
  height: 70px;
}
</style>
